<template>
    <div>
        <el-card class="box-card">
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="基本信息">
          <el-card class="box-card">
            <h3>车辆基本信息</h3>

              <el-form ref="truck" v-model="truckDetails" label-width="150px" :inline="true">
                <el-form-item label="车辆编号:" prop="truckDetails.id">
                  <el-input disabled style="width: 370px;" v-model="truckDetails.id"></el-input>
                </el-form-item>
                <el-form-item label="车牌号码:" >
                  <el-input v-bind:disabled="disabledstatus"  style="width: 370px;" v-model="updTruckData.licensePlate"></el-input>
                </el-form-item>
                <el-form-item label="所属机构:" >
                  <el-input disabled style="width: 370px;" v-model="dataAll.orgName"></el-input>
                </el-form-item>
                <el-form-item label="所属车队:" >
                  <el-input disabled style="width: 370px;" v-model="dataAll.fleetName"></el-input>
                </el-form-item>
                <el-form-item label="车型名称:" >
                  <el-input disabled style="width: 370px;" v-model="dataAll.truckTypeName"></el-input>
                </el-form-item>
                <el-form-item label="车辆体积:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updTruckData.allowableVolume"><template slot="append">千克</template></el-input>
                  <template slot="append">千克</template>
                </el-form-item>
                <el-form-item label="车辆载重:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updTruckData.allowableLoad"><template slot="append">千克</template></el-input>

                </el-form-item>
                <el-form-item label="过期状态:" >
                  <el-input disabled style="width: 370px;" value="未过期" v-show="truckDetails.status == 1"></el-input>
                  <el-input disabled style="width: 370px;" value="已过期" v-show="truckDetails.status == 0"></el-input>
                </el-form-item>
                <el-form-item label="工作状态:" >
                  <el-input disabled style="width: 370px;" v-model="dataAll.workStatus"></el-input>
                </el-form-item>
                <el-form-item label="装载状态:" >
                  <el-input disabled style="width: 370px;" v-model="dataAll.loadingStatus"></el-input>
                </el-form-item>
                <el-form-item label="GPSID:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updTruckData.deviceGpsId"></el-input>
                </el-form-item>
            </el-form>

            <el-divider></el-divider>
            <el-button @click="bianji()" v-show="disabledstatus == true">编辑</el-button>
            <el-button @click="faihui()" v-show="disabledstatus == true">返回</el-button>

            <el-button @click="xiugai()" v-show="disabledstatus == false">保存</el-button>
            <el-button @click="quxiao()" v-show="disabledstatus == false">取消</el-button>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="行驶证信息">
          <el-card class="box-card">
            <h3>行驶证信息</h3>

            <el-form ref="truck" v-model="updLicense" label-width="150px" :inline="true">
                <el-form-item label="行驶证号:" prop="truckDetails.id">
                  <el-input disabled style="width: 370px;" v-model="updLicense.id"></el-input>
                </el-form-item>
                <el-form-item label="发动机号码:" >
                  <el-input v-bind:disabled="disabledstatus"  style="width: 370px;" v-model="updLicense.engineNumber"></el-input>
                </el-form-item>
                <el-form-item label="注册时间:" >
                  <el-date-picker
                    v-bind:disabled="disabledstatus"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 370px;"
                    v-model="updLicense.registrationDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="强制报废时间:" >
                  <el-date-picker
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-bind:disabled="disabledstatus"
                    style="width: 370px;"
                    v-model="updLicense.mandatoryScrap"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="整备质量:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updLicense.overallQuality"><template slot="append">千克</template></el-input>
                </el-form-item>
                <el-form-item label="检验有效期:" >
                  <el-date-picker
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-bind:disabled="disabledstatus"
                    style="width: 370px;"
                    v-model="updLicense.expirationDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                  <template slot="append">千克</template>
                </el-form-item>
                <el-form-item label="核定载质量:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updLicense.allowableWeight"><template slot="append">千克</template></el-input>

                </el-form-item>
                <el-form-item label="有效期:" >
                  <el-date-picker
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-bind:disabled="disabledstatus"
                    style="width: 370px;"
                    v-model="updLicense.validityPeriod"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="道路运输证号:" >
                  <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="updLicense.transportCertificateNumber"></el-input>
                </el-form-item>
            </el-form>

            <br>
            <!-- 车辆图片上传 -->
            <h3>行驶证图片</h3>
            <el-upload
              class="avatar-uploader"
              action="/OSSFileApi/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1">

              <el-image :src="imageUrl1" class="avatar">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot" >
                  <i class="el-icon-picture-outline">图片未上传</i>
                </div>
              </el-image>
            </el-upload>

            <el-divider></el-divider>
            <el-button @click="bianji()" v-show="disabledstatus == true">编辑</el-button>
            <el-button @click="faihui()" v-show="disabledstatus == true">返回</el-button>

            <el-button @click="xiugaiLicense()" v-show="disabledstatus == false">保存</el-button>
            <el-button @click="quxiao()" v-show="disabledstatus == false">取消</el-button>

          </el-card>
        </el-tab-pane>
        <el-tab-pane label="车次信息">
          <el-card class="box-card">
            <h3>车次信息</h3>
            <el-form ref="truck" v-model="updLicense" label-width="150px" :inline="true">
              <el-form-item label="所属线路:" >
              <el-input disabled style="width: 370px;" v-model="pdTransportLine.name"></el-input>
            </el-form-item>
            <el-form-item label="所属车次:" >
              <el-input disabled style="width: 370px;" v-model="pdTransportTrips.name"></el-input>
            </el-form-item>
            </el-form>

            <el-divider></el-divider>
            <el-button @click="faihui()">返回</el-button>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    </div>
</template>
<script>
import method from '../../../api/logisticsmanagement/transitcenter/truckManagement'
import {mapState} from 'vuex'

export default {
    name: "tuckDetails",
    computed: {
    ...mapState(['ossaddr'])
    },
    data() {
      return{
        //  当前车辆的ID
        truckId:  "",
        tabPosition: 'left',// 方向
        dataAll: [],//  所有信息
        truckDetails: {},//  车辆基本信息
        pdTransportTrips: {},//  车次信息
        pdTransportLine: {},//  线路信息
        disabledstatus: true,//  input的disabled状态
        updTruckData: {},//  要修改的车辆基本信息数据
        updLicense: {},//  要修改的车辆行驶证数据
        imageUrl1: "",//  车辆图片

      }
    },
    methods: {

      //  返回上一个组件
      faihui(){
        if(this.$route.query.operate == "truck"){
          this.$router.push({path:'/vehicleManagement'})
        }else{
          this.$router.push({path:'/truckliebiao',query:{fleetid:this.$route.query.fleetid}})
        }
      },
      //  获取上一个组件传过来的truckId
      truckIdFuZhi() {

          this.truckId = this.$route.query.id
      },
      //  查询车辆基本信息
      findTruckDetails() {
        method.selTruckDetails(this.truckId).then(({data}) => {


          this.dataAll = data.data

          this.truckDetails = data.data.pdTruck



          if(data.data.pdTruckLicense !=null){
            // data.data.pdTruckLicense.truckId = this.truckId
            this.updLicense = data.data.pdTruckLicense
            if(data.data.pdTruckLicense.picture != null && data.data.pdTruckLicense.picture != ""){
              this.imageUrl1 = this.ossaddr+"/"+this.dataAll.pdTruckLicense.picture
            }
          }else{
            this.updLicense = {truckId: this.truckId}
          }

          if(data.data.pdTransportTrips != null && data.data.pdTransportTrips != "" && data.data.pdTransportTrips != "null"){
            this.pdTransportTrips = data.data.pdTransportTrips
          }

          if(data.data.pdTransportLine != null && data.data.pdTransportLine != ""){
            this.pdTransportLine = data.data.pdTransportLine
          }

          this.updTruckData = {
            "truckId": this.truckId,
            "licensePlate": this.truckDetails.licensePlate,
            "allowableLoad": this.truckDetails.allowableLoad,
            "allowableVolume": this.truckDetails.allowableVolume,
            "deviceGpsId": this.truckDetails.deviceGpsId
          }
          this.$store.commit("startAnimation",false);
        })
      },
      //  开启编辑
      bianji() {

        this.disabledstatus = false
      },
      //  取消编辑
      quxiao() {

        this.disabledstatus = true
      },
      //  确定修改车辆基本信息
      xiugai() {
        method.updTruck(this.updTruckData).then(({data}) => {

          if(data.code == 200){
            this.$notify({
            title: '成功',
            message: '车辆信息修改成功!',
            type: 'success'
            });
            this.disabledstatus = true
          }
        })
      },
      //  确定修改车辆行驶证信息
      xiugaiLicense() {

        method.updTruckLicense(this.updLicense).then(({data}) => {

          if(data.code == 200){
            this.$notify({
            title: '成功',
            message: '车辆行驶证修改成功!',
            type: 'success'
            });
            this.disabledstatus = true
            this.findTruckDetails()
          }
        })
      },
      //  文件上传
      //  文件上传成功后的方法
      handleAvatarSuccess1(res, file) {


        this.imageUrl1 = URL.createObjectURL(file.raw);
        let images = "/"+res.data.url
        let license = {}
        if(this.dataAll.pdTruckLicense != null && this.dataAll.pdTruckLicense != ""){
           license = {
            "id": this.dataAll.pdTruckLicense.id,
            "picture": images,
             "truckId": this.truckId
          }
        }else{
          license = {
            "id": "",
            "picture": images,
            "truckId": this.truckId
          }
        }
        method.fileUpload(license).then(({data}) => {

          if(data.code==200){
            this.$notify({
            title: '成功',
            message: '车辆行驶证图片修改成功!',
            type: 'success'
            });
            this.findTruckDetails()
          }
        })

      },
      //  文件上传时的方法
      beforeAvatarUpload1(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    created() {
      this.$store.commit("startAnimation",true);
      this.truckIdFuZhi()
      this.findTruckDetails()
    }
}
</script>
<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
